<template>
  <div>
    <div class="card side_bar_card" v-for="(type,i) in types" v-bind:key="i">
      <template v-if="type==='hot'">
        <div class="title f2">
          <el-icon class="el-icon-collection title-icon"/>
          {{ data.hot.title }}
        </div>
        <div class="divider_self" :style="[data.hot.dividerStyle]"></div>
        <side-bar-hot/>
      </template>
      <template v-if="type==='record'">
        <div class="title f2">
          <el-icon class="el-icon-notebook-2 title-icon"/>
          {{ data.record.title }}
        </div>
        <div class="divider_self" :style="[data.record.dividerStyle]"></div>
        <side-bar-record/>
      </template>

      <template v-if="type==='search'">
        <div class="title f2">
          <el-icon class="el-icon-search title-icon"/>
          {{ data.search.title }}
        </div>
        <div class="divider_self" :style="[data.search.dividerStyle]"></div>
        <side-bar-search @searchWords="searchWords"/>
      </template>
    </div>
  </div>
</template>

<script>
import SideBarHot from "@/public/sidebar/hot";
import SideBarRecord from "@/public/sidebar/record";
import SideBarSearch from "@/public/sidebar/search";

export default {
  name: "SideBarCard",
  components: {SideBarSearch, SideBarRecord, SideBarHot},
  props: {
    types: {
      type: Array
    }
  },
  data() {
    return {
      data: {
        hot: {
          title: '热门板块',
          dividerStyle: {backgroundColor: '#bd514c'}
        },
        record: {
          title: '归档',
          dividerStyle: {backgroundColor: '#58ad66'}
        },
        search: {
          title: '搜索',
          dividerStyle: {backgroundColor: '#c1d06e'}
        },
      }
    }
  },
  methods: {
    searchWords(word) {
      console.log(word)
      this.$emit('searchWords', word)
    }
  }
}
</script>

<style scoped>
.side_bar_card {
  margin: 0 20px 20px 20px;
  padding: 14px 20px;
  text-align: left;
}

.title {
  padding: 5px 5px 5px 0;
}

.title-icon {
  margin-right: 10px;
}

.divider_self {
  width: 40%;
  height: 5px;
  margin-top: 10px;
  margin-bottom: 20px;
  transition: width 800ms;
}

.card:hover .divider_self {
  width: 100%;
}
</style>
